<template>
  <el-card class="order-warning">
    <div slot="header" class="clearfix">
      <!-- 面包导航 -->
      <my-bread>订单预警</my-bread>
    </div>
    <!-- tab切换部分 -->
    <el-radio-group v-model="TabType">
      <el-radio-button v-for="item in tabes" :label="item.type" :key="item.type">{{item.title}}</el-radio-button>
    </el-radio-group>

    <!-- 筛选区 -->
    <el-form ref="form" :model="orderForm" label-width="80px">
      <el-form-item label="订单搜索">
        <el-select v-model="orderForm.number" placeholder="订单号" style="display:inline-block">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>

        <el-input v-model="orderForm.keyHot" placeholder="店铺名称/电话/姓名" style="display:inline-block; width:200px;margin:0 30px 0 20px;"></el-input>

        <el-button type="primary">筛选</el-button>

        <span class="colorBlue" style="margin:0 30px 0 20px;">重置筛选条件</span>

      </el-form-item>
    </el-form>

    <!-- table展示 -->
      <el-table
        :data="tableData1"
        :header-cell-style="{background:'rgba(250,250,250,1)',color:'#606266',fontWeight: 700,fontSize:'18px'}"
        highlight-current-row
        stripe
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
              <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                border
                row-key="id"
                >
                <el-table-column
                  prop="name"
                  label="商品"
                  width="280">
                   <template slot-scope="scope">
                     <div class="clearfix orderItem">
                       <div class="fl imgBox"></div>
                       <p class="ellipsis2 fl orderItem-p">这是商品名称杀了撒 是撒撒大所多sad12132131313</p>
                      <div class="fr orderItem-num" style="fontSize:12px;"><span>24.22</span><p style="textAlign: right;">X1</p></div>
                     </div>

                     <div class="clearfix orderItem">
                       <div class="fl imgBox"></div>
                       <p class="ellipsis2 fl orderItem-p">这是商品名称杀了撒 是撒撒大所多sad12132131313</p>
                      <div class="fr orderItem-num" style="fontSize:12px;"><span>24.22</span><p style="textAlign: right;">X1</p></div>
                     </div>
                    <!-- <el-button
                      type="text"
                      size="small">
                      详情
                    </el-button> -->
                  </template>
                </el-table-column>

                <el-table-column
                  prop="address1"
                  label="单价/数量">
                </el-table-column>

                <el-table-column
                  prop="address2"
                  label="超时时间">
                </el-table-column>

                <el-table-column
                  prop="address3"
                  label="买家/收货人">
                </el-table-column>

                <el-table-column
                  prop="address4"
                  label="配送方式">
                </el-table-column>

                <el-table-column
                  prop="address5"
                  label="实收金额">
                </el-table-column>

                <el-table-column
                  prop="address6"
                  label="订单状态">
                </el-table-column>

                <el-table-column
                  prop="address7"
                  label="备注">
                  <template slot-scope="scope">
                    <!-- <el-button
                      type="text"
                      size="small">
                      详情
                    </el-button> -->
                    <el-dropdown trigger="click">
                        <span class="table-column__gd">
                          已短信通知
                          <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="12">编辑1</el-dropdown-item>
                          <el-dropdown-item command="34">编辑2</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                  </template>
                </el-table-column>

              </el-table>
          </template>
        </el-table-column>

        <el-table-column
          label="商家"
          prop="idname">
        </el-table-column>
        <el-table-column
          label="订单号"
          prop="name">
        </el-table-column>
        <el-table-column
          label="下单时间"
          prop="name1">
        </el-table-column>
        <el-table-column
          label="商家电话"
          prop="desc">
        </el-table-column>
      </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'OrderWarning',

  data () {
    return {
      tabes: [
        { title: '已短信通知', type: 0 },
        { title: '已电话通知', type: 1 },
        { title: '无响应', type: 2 }
      ],
      TabType: 0,

      // 筛选区
      orderForm: {
        number: null,
        keyHot: null

      },

      // 假数据
      tableData: [
        {
          id: 1,
          name: '商品1',
          address1: '上海市8 1弄1212',
          address2: ' 1518 121弄',
          address3: ' 151上海市普121弄',
          address4: ' 1518 1212弄',
          address5: '上海市1212普弄',
          address6: '江路 1511218 弄',
          address7: '上海市1212普陀区 弄'
        }, {
          id: 4,
          name: '王小虎',
          address1: '上海市8 弄',
          address2: ' 1518 弄',
          address3: ' 151上海市普弄',
          address4: ' 1518 弄',
          address5: '上海市普弄',
          address6: '江路 1518 弄',
          address7: '上海市普陀区 弄'
        }],

      tableData1: [{
        id: 77,
        idname: '袁辉超时',
        name: '1000000001641',
        name1: '2019-08-23 23：23',
        desc: '214342342'
      }]
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.el-radio-group {
  margin-bottom: 20px;

}
    .table-column__gd {
      cursor: pointer;
      color: #1890ff;
      padding: 0 10px;

    }

// 表格子样式
.orderItem{
  margin: 10px 0;
  .imgBox{
    width:50px;height:50px; border:1px solid red;
  }
  .orderItem-p{
    width:126px;font-size:12px;margin:0 15px;
  }
  .orderItem-num{
    font-size: 12px;
    p{
      text-align: right;
    }
  }
}
</style>
